<template>
    <div class="">
        
        <exPubTable ref="curTable" :cfg="cfg" :exData="dataList" class="mt10">
            <el-table-column prop="record_date" label="采集时间" width="95">
                <template slot-scope="scope">
                    <span :title="'id:'+scope.row.id">{{scope.row.record_date | dateFormat}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="代码"  width="75" fixed="left">
                <template slot-scope="scope">
                    <el-link type="primary" target="_blank" class="link-item"
                        :href="getDFCFUrl(scope.row.code)">
                            {{scope.row.code}}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称"  width="80" fixed="left">
                <template slot-scope="scope">
                    <el-link type="primary" target="_blank"  class="link-item"
                        :href="getULUrl(scope.row.code)">
                            {{scope.row.name}}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="star" label="关注" width="50" >
                <template slot-scope="scope">
                    <div @click="changeStar(scope.row)" style="font-size:20px;">
                        <span v-if="scope.row.star"><i style="color:red" class="el-icon-star-on"></i></span>
                        <span v-else><i style="color:gray" class="el-icon-star-on"></i></span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="event_type" label="类型" width="65" >
                <template slot-scope="scope">
                    {{$dict.tranDict("eventType",scope.row.event_type)}}
                </template>
            </el-table-column>
            <el-table-column prop="oper" label="操作/明细" width="150">
                <template slot-scope="scope">
                    <span>
                        <el-button size="mini" type="text" @click="updateStock(scope.row)" >更新</el-button>
                        <el-button style="margin-left:2px" size="mini" type="text" @click="addComp(scope.row)" >比对</el-button>
                    </span>
                    <span>
                        <el-popover style="margin-left:2px;display:inline" placement="right" :width="chartWidth" trigger="hover"
                            v-if="scope.row.event_type==0 || scope.row.event_type==1 ||scope.row.event_type==3 ||scope.row.event_type==4">
                            <div style="min-height:400px">
                                <gtChart :id="scope.row.id" v-if="sel_id==scope.row.id"></gtChart>
                            </div>
                            <div style="color:#3a8ee6;display:inline"  slot="reference" @click="sel_id=scope.row.id" @mouseover="sel_id=scope.row.id">明细</div>
                        </el-popover>
                    </span>
                    <span>
                        <el-button style="margin-left:2px" size="mini" type="text" @click="showDesc(scope.row)"
                            v-if="scope.row.event_type!=0 &&scope.row.event_type!=3">购买</el-button>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="录入价格"  width="60"></el-table-column>
            <el-table-column prop="lastprice" label="最新价格"  width="65">
                <template slot-scope="scope">
                    <span :class="getPriceClass(scope.row.lastdiff)" :title="scope.row.lastprice">{{scope.row.lastdiff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="gt_rate" label="港通增比" width="65" sortable>
                <template slot="header">
                    <span title="最近15日内持仓比最低的当日与最新的持仓比之差">港通增比</span>
                </template>
                <template slot-scope="scope">
                    {{scope.row.gt_rate.toFixed(2)}}%
                </template>
            </el-table-column>
            <el-table-column prop="price_rate" label="价格幅度" width="75" sortable>
                <template slot="header">
                    <span title="最近15日内持仓比最低的当天价格与最新价格的差价">价格幅度</span>
                </template>
                <template slot-scope="scope">
                    <span :class="getPriceClass(scope.row.price_rate,true)">{{scope.row.price_rate.toFixed(2)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="daymaxdiff" label="最高" width="65" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.daymaxdiff" :class="getPriceClass(scope.row.daymaxdiff)" :title="scope.row.daymax">{{scope.row.daymaxdiff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="daymindiff" label="最低" width="65" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.daymindiff" :class="getPriceClass(scope.row.daymindiff)" :title="scope.row.daymin">{{scope.row.daymindiff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day1diff" label="1日" width="65" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day1diff" :class="getPriceClass(scope.row.day1diff)">{{scope.row.day1diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day5diff" label="5日" width="65" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day5diff" :class="getPriceClass(scope.row.day5diff)">{{scope.row.day5diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day10diff" label="10日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day10diff" :class="getPriceClass(scope.row.day10diff)">{{scope.row.day10diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day15diff" label="15日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day15diff" :class="getPriceClass(scope.row.day15diff)">{{scope.row.day15diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day30diff" label="30日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day30diff" :class="getPriceClass(scope.row.day30diff)">{{scope.row.day30diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day45diff" label="45日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day45diff" :class="getPriceClass(scope.row.day45diff)">{{scope.row.day45diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day60diff" label="60日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day60diff" :class="getPriceClass(scope.row.day60diff)">{{scope.row.day60diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="day90diff" label="90日" width="65"  sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.day90diff" :class="getPriceClass(scope.row.day90diff)">{{scope.row.day90diff.toFixed(1)}}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="update_time" label="更新时间"  width="140">
                <template slot-scope="scope">
                    {{scope.row.update_time | timeFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="desc" label="备注" show-overflow-tooltip></el-table-column>
        </exPubTable>
        
        <el-dialog  v-dialogDrag
            title="填写备注"
            :visible.sync="dialogVisible"
            :close-on-click-modal = "false"
            width="500px">
            <el-form>
                <el-form-item label="类型" >
                    <el-select v-model="event_type">
                        <el-option value="0" label="购买"></el-option>
                        <el-option value="3" label="手工"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input v-model="desc" style="width:380px"  clearable></el-input>
                </el-form-item>
                <el-form-item style="text-align:center">
                    <el-button type="primary" @click="buy">确定</el-button>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import config from '~/config'
import dayjs from '~/plugins/day';

import datadict from '~/plugins/dict';
import gtChart from '~/components/stock/gtChart.vue';

export default {
    components:{
        gtChart
    },
    data() {
        return {
            tableheight: null,
            dataList: [],
            sel_id : "",
            desc : "",
            event_type : "0",
            selData: null,
            chartWidth: 900,
            loading: false,
            dialogVisible : false,
            cfg : {
            },
        }
    },
     

    mounted() {
        // this.setTableHeight();
        try{
            if(window.isMini){
                this.chartWidth = 400;
            }
        }catch(ex){

        }
    },

    methods: {
        setTableHeight(){
            var $this = this;
            $this.tableheight = $this.getTableHeight($this.$refs.curTable.$el,15);
        },
        getPriceClass(diff,is_record_price){
            if(diff>0){
                return "red"
            }else if(diff<0){
                if(is_record_price) return "yellow"
                return "green"
            }else{
                return ""
            }
        },
        addComp(item){
            window.$vue.addCompItem(item);
        },
        getDFCFUrl(code){
            // http://quote.eastmoney.com/sh600756.html
            if("6"==code.substring(0,1)){
                return "http://quote.eastmoney.com/sh"+code+".html";
            }else{
                return "http://quote.eastmoney.com/sz"+code+".html";
            }
        },
        getULUrl(code){
            if("6"==code.substring(0,1)){
                return "https://www.uldata.com/hsgt/sh"+code;
            }else{
                return "https://www.uldata.com/hsgt/sz"+code;
            }
        },
        clear(){
            this.sel_id="";
            this.dataList=[];
        },
        // 获取数据
        setDataList(list) {
            this.sel_id="";
            this.dataList = list;
            var that = this;
            this.dataList.map(function(item){
                that.tranRowData(item);
            })
        },
        tranRowData(item){
            item.record_date = item.record_date.substring(0,10)
            item.lastdiff = 0;
            item.daymaxdiff = 0;
            item.daymindiff = 0;
            item.day1diff = 0;
            item.day5diff = 0;
            item.day10diff = 0;
            item.day15diff = 0;
            item.day30diff = 0;
            item.day45diff = 0;
            item.day60diff = 0;
            item.day90diff = 0;
            if(item.lastprice)  item.lastdiff = (item.lastprice-item.price)*100/item.price;
            if(item.daymax)  item.daymaxdiff = (item.daymax-item.price)*100/item.price;
            if(item.daymin)  item.daymindiff = (item.daymin-item.price)*100/item.price;
            if(item.day1)  item.day1diff = (item.day1-item.price)*100/item.price;
            if(item.day5)  item.day5diff = (item.day5-item.price)*100/item.price;
            if(item.day10)  item.day10diff = (item.day10-item.price)*100/item.price;
            if(item.day15)  item.day15diff = (item.day15-item.price)*100/item.price;
            if(item.day30)  item.day30diff = (item.day30-item.price)*100/item.price;
            if(item.day45)  item.day45diff = (item.day45-item.price)*100/item.price;
            if(item.day60)  item.day60diff = (item.day60-item.price)*100/item.price;
            if(item.day90)  item.day90diff = (item.day90-item.price)*100/item.price;
            if(item.detail_data) item.detail_data = JSON.parse(item.detail_data)
            return item;
        },
        changeStar(row){
            if(row.event_type==0 && row.star){
                this.$message.info("购买类型的记录不能取消关注");
                return;
            }
            if(row.event_type==3 && row.star){
                this.$message.info("手工添加类型的记录不能取消关注");
                return;
            }
            this.$axios.get(`${config.sapi}/api/stock/star?id=${row.id}`)
            .then((res) => {
                if (res.data.code == 200) {
                   row.star = res.data.data.star;
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        updateStock(row){
            this.$axios.get(`${config.sapi}/api/stock/fillRecord?id=${row.id}`)
            .then((res) => {
                if (res.data.code == 200) {
                    if(res.data.data || res.data.data.id){
                        var newitem = res.data.data;
                        this.sel_id = "";
                        for(var i=0;i<this.dataList.length;i++){
                            var item = this.dataList[i];
                            if(item.id == newitem.id){
                                this.tranRowData(newitem);
                                this.dataList.splice(i,1,newitem);
                                break;
                            }
                        }
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        showDesc(row){
            this.selData= row;
            this.dialogVisible = true;
        },

        buy(){
            var row = this.selData;
            var that =this;
            this.$confirm('确定增加一条购买记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.dialogVisible = false;
                var desc = row.record_date.substring(0,10);
                if(this.eventMap[row.event_type]){
                    desc += "$"+this.eventMap[row.event_type];
                }else{
                    desc += "$"+row.event_type;
                }
                desc += "$"+this.$dict.tranDict("eventType",row.event_type);  
                desc += "$"+this.desc;
                that.$axios.get(`${config.sapi}/api/stock/buy?code=${row.code}&desc=${desc}&event_type=${this.event_type}`)
                .then((res) => {
                    if (res.data.code == 200) {
                        that.$message.success("记录成功");
                    } else {
                        that.$message.error(res.data.message);
                    }
                })
            })
        },
    }
}
</script>

<style lang="less" scoped>
.flexdiv {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    button{
        margin-left: 10px;
    }
}

.qryform{
    margin-bottom:10px;
    button{
        margin-top:0px;
        vertical-align: middle;
    }
}
.order-class{
    display: inline-block;
    margin-right: 10px;
    min-width: 50px;
}

.red{
    color: red;
}
.green{
    color: green;
}
.yellow{
    color: rgb(96, 22, 233)
}
.link-item{
    font-size: 12px;
}

</style>
